<div class="p-h-md p-v bg-white box-shadow pos-rlt">
  <label class="ui-switch bg-info pull-right m-t-xs">
    <input type="checkbox" ng-model="center">
    <i></i>
  </label>
  <h3 class="no-margin">Timelines</h3>
</div>
<div class="p-md">
  <ul class="timeline" ng-class="{'timeline-center': center}">
    <li class="tl-header">
      <div class="btn btn-default">Timeline</div>
    </li>
    <li class="tl-item">
      <div class="tl-wrap b-info">
        <span class="tl-date text-muted">5s ago</span>
        <div class="tl-content">
          Simple timeline title
        </div>
      </div>
    </li>
    <li class="tl-item">
      <div class="tl-wrap">
        <span class="tl-date text-muted">2h ago</span>
        <div class="tl-content panel p-sm b-a">
          <span class="arrow b-white left pull-top"></span>
          <div>Content in a panel with arrow</div>
        </div>
      </div>
    </li>
    <li class="tl-item tl-left">
      <div class="tl-wrap b-inverse">
        <span class="tl-date text-muted">7:30 am</span>
        <div class="tl-content panel bg-inverse p-sm">
          <span class="arrow b-inverse left pull-top hidden-left"></span>
          <span class="arrow b-inverse right pull-top visible-left"></span>
          <div class="text-lt">Content with background </div>
        </div>
      </div>
    </li>
    <li class="tl-item">
      <div class="tl-wrap b-primary">
        <span class="tl-date text-muted">04.2014</span>
        <div class="tl-content panel b-a w-lg w-auto-xs">
          <span class="arrow b-white left pull-top"></span>
          <div class="text-lt p-h m-b-sm">With Title</div>
          <div class="p b-t b-light">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Aliquam sollicitudin venenatis ipsum ac feugiat. Vestibulum ullamcorper
          </div>
        </div>
      </div>
    </li>
    <li class="tl-item tl-left">
      <div class="tl-wrap b-success">
        <span class="tl-date text-muted">04.2014</span>
        <div class="tl-content panel no-border bg-info dk block">
          <span class="arrow b-info left pull-top hidden-left"></span>
          <span class="arrow b-info right pull-top visible-left"></span>
          <div class="text-lt p-h m-b-sm font-bold">Block</div>
          <div class="panel-body b-t b-info">
            Consectetur adipiscing elit. Morbi id neque quam. Aliquam sollicitudin venenatis ipsum ac feugiat. Vestibulum ullamcorper
          </div>             
        </div>
      </div>
    </li>
    <li class="tl-header">
      <div class="btn btn-sm btn-default btn-rounded">2014</div>
    </li>
    <li class="tl-item">
      <div class="tl-wrap">
        <span class="tl-date text-muted">10.08.2013</span>
        <div class="tl-content panel p-sm b-a">
          <span class="arrow b-white left pull-up hidden-left"></span>
          <span class="arrow b-white right pull-up visible-left"></span>
          <div class="text-lt">A good story to hear.</div>
        </div>
      </div>
    </li>
    <li class="tl-header">
      <i class="ui-icon fa fa-twitter b-white b-2x bg-info"></i>
    </li>
    <li class="tl-item tl-left">
      <div class="tl-wrap b-white">
        <span class="tl-date text-muted">5.07.2013</span>
        <div class="tl-content panel p-sm b-a">
          <span class="arrow b-white left pull-up hidden-left"></span>
          <span class="arrow b-white right pull-up visible-left"></span>
          <div class="text-lt">Yesterday is History</div>
        </div>
      </div>
    </li>
    <li class="tl-header">
      <div class="btn btn-sm btn-default btn-rounded">more</div>
    </li>
  </ul>
</div>